<template>
  <div class="box">
    <!-- 顶部 -->
    <div class="box1">
      <i class="xiangji iconfont icon-xiangji"></i>
      <span class="dongtai">动态</span>
      <i class="xing iconfont icon-star"></i>
      <i class="jiahao iconfont icon-jiahao"
         @click="discussAdd"></i>
    </div>
    <!-- 中间 -->
    <div style="margin-bottom: 63.2px;">
      <div class="box3"
           v-for="(item,index) in articleList"
           @click="articleDetail(index)"
           :key="index">
        <div class="yonghu1">
          <img class="yuan1"
               :src="'http://123.56.23.31:88/st/' + item.userVO.faceImage"
               title="" />
          <div class="wangming1">{{item.userVO.username}}</div>
          <div class="qianming1">{{item.post.title}}</div>
          <div class="zi1">{{item.post.content}}</div>
        </div>
        <div class="tupian">
          <img class="tupian1"
               :src="item.post.score"
               title="" />
        </div>
      </div>
    </div>
    <!-- Dialog -->
    <van-dialog v-model="showDiscuss"
                title="发布动态"
                theme="round-button"
                @confirm="sendArticle"
                show-cancel-button>
      <div style="margin:10px 0;">
        <van-cell-group>
          <van-field v-model="articleTitle"
                     left-icon="orders-o"
                     label="文章标题"
                     placeholder="请输入文章标题" />
        </van-cell-group>
        <van-cell-group>
          <van-field v-model="articleContent"
                     left-icon="records"
                     label="文章内容"
                     placeholder="请输入文章内容" />
        </van-cell-group>
        <van-cell-group style="display: flex;align-items: center;justify-content: space-around;">
          <span style="font-size:14px">上传文章配图：</span>
          <van-uploader v-model="fileList"
                        :max-count="1"
                        :after-read="afterRead" />
        </van-cell-group>
      </div>
    </van-dialog>
    <common-footer class="dibu"></common-footer>
    <div></div>
  </div>
</template>

<script>
import { discussAdd, getArticleMessage } from "../../api/getData.js";
import CommonFooter from "@/components/CommonFooter.vue";
export default {
  components: {
    CommonFooter
  },
  data () {
    return {
      articleList: [],
      userInfo: {},
      showDiscuss: false,
      articleTitle: "",
      articleContent: "",
      fileData: "",
      fileList: []
    }
  },
  created () {
    this.articleList = JSON.parse(window.localStorage.getItem("articleList"))
    this.userInfo = JSON.parse(window.localStorage.getItem('userData'))
  },
  methods: {
    articleDetail (index) {
      this.$router.push({ name: "ArticleDetail", params: { detailData: JSON.stringify(this.articleList[index]) } })
    },
    // 添加帖子
    discussAdd () {
      this.showDiscuss = true
    },
    afterRead (file) {
      this.$message("上传成功")
      this.fileData = file.content
    },
    // 确认发送文章
    sendArticle () {
      this.$message.loading({
        message: '发送中...',
        forbidClick: true,
        duration: 0
      })
      if (this.articleTitle === "" || this.articleContent === "" || this.fileData === "") {
        this.$message.fail("标题，内容，文章图片缺一不可")
        this.showDiscuss = true
      } else {
        discussAdd(this.userInfo.id, this.articleTitle, this.articleContent, this.fileData).then(res => {
          this.$message.success("发送成功")
          this.$message.clear()
          getArticleMessage().then((res) => {
            window.localStorage.setItem("articleList", JSON.stringify(res.data.data))
            this.$message.success("加载成功")
            this.$message.clear()
            this.$router.go(0)
          })
        })
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.box {
  overflow-x: hidden !important;
  overflow: scroll;
}
// 头部
.box1 {
  width: 100%;
  height: 40px;
  line-height: 40px;
  background-image: linear-gradient(to right, #92fe9d 0%, #00c9ff 100%);
  position: relative;
  display: flex;
  justify-content: space-around;
}
.xiangji {
  margin-left: 7px;
  font-size: 22px;
  color: black;
}
.dongtai {
  margin-left: 110px;
  font-weight: bold;
}
.xing {
  color: black;
  display: block;
  margin-left: 80px;
  font-size: 20px;
}
.jiahao {
  margin-left: 10px;
  font-size: 18px;
  color: black;
}

.box3 {
  box-sizing: border-box;
  margin-top: 10px;
  width: 100%;
  height: 300px;
  //  border-radius:20px;
  box-shadow: 0px 6px 12px rgb(100, 98, 98);
  border: 1px solid rgb(206, 204, 204);
  position: relative;
}
.yonghu1 {
  width: 100%;
  height: 100px;
  // background: rgb(165, 163, 163);
}
.yuan1 {
  height: 50px;
  width: 50px;
  border-radius: 50px;
  background: blue;
  margin-left: 10px;
  margin-top: 12px;
  position: absolute;
}
.wangming1 {
  position: absolute;
  top: 18px;
  left: 68px;
  font-size: 15px;
  font-weight: bold;
}
.qianming1 {
  margin-top: 40px;
  font-size: 12px;
  left: 68px;
  position: absolute;
  max-width: 250px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.zi1 {
  position: absolute;
  width: 100%;
  height: 20px;
  // background: brown;
  margin-top: 70px;
  line-height: 20px;
  margin-left: 6px;
  max-width: 350px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tupian1 {
  width: 80%;
  height: 160px;
  // background: brown;
  border: 1px solid rgb(194, 192, 192);
}
/deep/.tupian img {
  border: none;
  border-radius: 8px;
  box-shadow: 0px 0px 5px skyblue;
  position: relative;
  left: 50%;
  transform: translate(-50%, 14px);
}
.fenxiang {
  width: 100;
  height: 30px;
  // background: red;
  display: flex;
  justify-content: space-around;
  line-height: 30px;
  // border-bottom: 1px solid rgb(184, 182, 182);
}
</style>